﻿<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AjaxChatWebApp._Default" %>

<asp:Content runat="server" ID="FeaturedContent" ContentPlaceHolderID="FeaturedContent">
    <!-- Animated menu -->
    <script src="Content/animated-menu/js/jquery.easing.1.3.js"></script>
    <script src="Content/animated-menu/animated-menu.js"></script>
    <!------->
    <!-- jQuery -->
    <script>
        var emoTexts = new Array();
        var emoticons = new Array();
        emoTexts[0] = ':)';
        emoticons[0] = '<img src=\"Emoticons/smile.ico\" alt=\"\" width=\"20px\" height=\"20px\"/>';
        emoTexts[1] = ':d';
        emoticons[1] = '<img src=\"Emoticons/big_smile.ico\" alt=\"\" width=\"20px\" height=\"20px\"/>';
        emoTexts[2] = ':o';
        emoticons[2] = '<img src=\"Emoticons/haha.ico\" alt=\"\" width=\"20px\" height=\"20px\"/>';
        emoTexts[3] = 'x(';
        emoticons[3] = '<img src=\"Emoticons/angry.ico\" alt=\"\" width=\"20px\" height=\"20px\"/>';
        emoTexts[4] = ':x';
        emoticons[4] = '<img src=\"Emoticons/beauty.ico\" alt=\"\" width=\"20px\" height=\"20px\"/>';
        emoTexts[5] = ':h';
        emoticons[5] = '<img src=\"Emoticons/byebye.ico\" alt=\"\" width=\"20px\" height=\"20px\"/>';
        emoTexts[6] = '>:|';
        emoticons[6] = '<img src=\"Emoticons/hell_boy.ico\" alt=\"\" width=\"20px\" height=\"20px\"/>';
        emoTexts[7] = ':*';
        emoticons[7] = '<img src=\"Emoticons/sweet_kiss.ico\" alt=\"\" width=\"20px\" height=\"20px\"/>';
        emoTexts[8] = '(:|';
        emoticons[8] = '<img src=\"Emoticons/tire.ico\" alt=\"\" width=\"20px\" height=\"20px\"/>';
        emoTexts[9] = ':(';
        emoticons[9] = '<img src=\"Emoticons/too_sad.ico\" alt=\"\" width=\"20px\" height=\"20px\"/>';

        var userId;
        var strRoomParam;
        var currentFriend;
        var currentFriendRequest;
        var currentRoom;
        var currentRoomRequest;
        var currentRoomId = null;
        var friends;
        var rooms = null;
        var friendList = new Array();
        var roomList = new Array();
        var tabCount = 0;
        $(function () {
            userId = $('#userId').val();
            var url;
            var timeOut;
            
            //===== POLLING GET FRIENDS =======
            function getFriendList() {
                url = 'http://localhost:62865/api/friendships?' + 'userId=' + userId;
                
                $.ajax({
                    type: 'GET',
                    url: url,
                    dataType: 'json',
                    //crossDomain: true,
                    success: function (data) {                       
                        friends = data;
                        getRoomList();
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        //alert(textStatus);
                    },
                });

                // polling every 5s to update friend list
                timeOut = setTimeout(function() { getFriendList(); }, 5000);
            }

            getFriendList();
            //===========================
            
            //===== POLLING GET ROOM =======
            function getRoomList() {
                url = 'http://localhost:62865/api/roommembers?' + 'userId=' + userId;

                $.ajax({
                    type: 'GET',
                    url: url,
                    dataType: 'json',
                    //crossDomain: true,
                    success: function (data) {
                        rooms = data;
                        displayFriendsAndRooms();                      
                    },
                });
            }
            //==============================
            
            //===== DISPLAY FRIEND LIST AND ROOM LIST ====
            function displayFriendsAndRooms() {
                $('#contacts').empty();
                
                // display friend list
                friendList = [];
                friends.forEach(function (value) {
                    var friend = {
                        id: value.Id,
                        name: value.UserName
                    };
                    friendList.push(friend);
                    if (value.Status == true) {
                        $('#contacts').append('<li style="height: 40px"><a id="' + value.Id
                           + '" href="#' + value.UserName + '" onclick="addTab(this.id, $(this).text(),' + "'" + value.Avatar + "'" + ', true, false);" style="float: left">' + value.UserName
                           + '<span class="ui-icon ui-icon-bullet"></span></a><img src="Avatars/' + value.Avatar + '" width="30px" height="30px" style="float: right"/></li>');
                    }
                    else {
                        //$('#contacts').append('<li class="ui-state-disabled"><a href="#' + value.UserName + '">' + value.UserName + '</a></li>');
                        $('#contacts').append('<li style="height: 40px"><a id="' + value.Id
                            + '" href="#' + value.UserName + '" onclick="addTab(this.id, $(this).text(),' + "'" + value.Avatar + "'" + ', true, false);" style="float: left">' + value.UserName
                            + '</a><img src="Avatars/' + value.Avatar + '" width="30px" height="30px" style="float: right"/></li>');
                    }
                });
                $("#contacts").menu('refresh');
                
                // display room list
                rooms.forEach(function (value) {
                    $('#contacts').append('<li style="height: 40px"><a id="room-' + value.Id
                                       + '" href="#' + value.Id + '" onclick="addTab(this.id, $(this).text(),' + "'Home-icon.png'" + ', true, true);" style="float: left">' + 'Room-' + value.Name
                                       + '<span class="ui-icon ui-icon-home"></span></a></li>');

                    $("#contacts").menu('refresh');
                });
            }
            //======================================
            
            //===== POLLING GET FRIEND REQUESTS =====
            function getFriendRequest() {
                url = 'http://localhost:62865/api/friendrequests?' + 'userId=' + userId;

                $.ajax({
                    type: 'GET',
                    url: url,
                    dataType: 'text',
                    success: function (data) {
                        currentFriendRequest = data.substring(1, data.length - 1);
                        $('#btFriendRequest').show();
                        $('#request').text(currentFriendRequest + ' wants to be friend with you');
                    },
                    error: function () {
                        $('#btFriendRequest').hide();
                    }
                });
                
                setTimeout(function () { getFriendRequest(); }, 5000);
            }

            getFriendRequest();
            //==============================
            
            //==== POLLING GET MESSAGES ======
            function getMessages() {
                url = 'http://localhost:62865/api/messages?' + 'userId=' + userId;
                var friendName;
                var friend;
                $.ajax({
                    type: 'GET',
                    url: url,
                    dataType: 'json',
                    //crossDomain: true,
                    success: function (data) {
                        //alert('success');
                        data.forEach(function (value) {
                            var fromUserId = value.UserId;
                            var toUserId = value.ToUserId;
                            var message = value.Text;
                            //friendName = getFriendName(fromUserId);
                            friend = getFriend(fromUserId);

                            if (tabCount == 0) {
                                addTab(fromUserId, friend.UserName, friend.Avatar, false, false);
                            }

                            $('.chatPanel').each(function () {
                                if ($(this).attr('id') == fromUserId) {
                                    //isOpen = true;
                                    //alert(fromUserId);
                                    return;
                                } else {
                                    //alert(fromUserId);
                                    addTab(fromUserId, friend.UserName, friend.Avatar, false, false);
                                    return;
                                }
                            });

                            appendMessage(fromUserId, message, friend.UserName);
                        });
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        alert(textStatus);
                    },
                });

                // polling every 5s to update messages
                timeOut = setTimeout(function () { getMessages(); }, 1000);
            }

            getMessages();
            //============================
            
            //==== POLLING GET ROOM MESSAGES ====
            function getRoomMessages() {
                if (rooms != null) {
                    url = 'http://localhost:62865/api/messages?' + createRoomListParameter();
                    var room;
                    var friend;
                    $.ajax({
                        type: 'GET',
                        url: url,
                        dataType: 'json',
                        //crossDomain: true,
                        success: function (data) {
                            //alert('success');
                            //alert(rooms.length);
                            for (var i = 0; i < rooms.length; i++) {
                                var id = 'room-' + rooms[i].Id;
                                var chatPanel = $('#chatTabs div[id="' + id + '"] div');
                                chatPanel.text('');
                            }

                            data.forEach(function (value) {
                                var fromUserId = value.UserId;
                                var fromUserName = value.UserName;
                                    var roomId = value.RoomId;
                                    var message = value.Text;
                                    //friend = getFriend(fromUserId);
                                    room = getRoom(roomId);
                                    roomId = 'room-' + value.RoomId;

                                    if (tabCount == 0) {
                                        addTab(roomId, room.Name, 'Home-icon.png', false, true);
                                    }

                                    $('.chatPanel').each(function () {
                                        if ($(this).attr('id') == fromUserId) {
                                            return;
                                        } else {
                                            addTab(roomId, room.Name, 'Home-icon.png', false, true);
                                            return;
                                        }
                                    });

                                    appendMessage(roomId, message, fromUserName);                               
                            });
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            alert(textStatus);
                        },
                    });                   
                }
                
                timeOut = setTimeout(function () { getRoomMessages(); }, 1000);
            }

            getRoomMessages();
            
            function createRoomListParameter() {
                strRoomParam = 'roomIds=' + rooms[0].Id;
                for (var i = 1; i < rooms.length; i++) {
                    strRoomParam += '&roomIds=' + rooms[i].Id;
                }

                //alert(strRoomParam);
                return strRoomParam;                
            }
            //===================================
            
            // POLLING GET ROOM REQUESTS
            function getRoomRequests() {
                url = 'http://localhost:62865/api/roomrequests?' + 'userId=' + userId;

                $.ajax({
                    type: 'GET',
                    url: url,
                    dataType: 'json',
                    //crossDomain: true,
                    success: function (data) {
                        currentRoomRequest = {
                            RoomId: data.RoomId,
                            RoomName: data.RoomName,
                            UserId: data.UserId,
                            UserName: data.UserName
                        };

                        $('#btRoomRequest').show();
                        $('#roomRequest').text(currentRoomRequest.UserName + ' invites you to chat in room ' + currentRoomRequest.RoomName);
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        $('#btRoomRequest').hide();
                    },
                });

                // polling every 5s to update friend list
                timeOut = setTimeout(function() { getRoomRequests(); }, 5000);
            }

            getRoomRequests();
            //===============================

            //========= DIALOGS ==========
            var tips;
            var userName;
            var password;
            var roomName;
            var myAlert;
            
            //===== Import friend =========
            $("#importFriends").click(function () {
                tips = $('#import');
                userName = $("#importUserName");
                password = $("#importPassword");
                $('#dlgImportFriend').dialog('open');
            });

            $("#dlgImportFriend").dialog({
                autoOpen: false,
                height: 350,
                width: 370,
                modal: true,
                buttons: {
                    'Import': function () {
                        var valid = true;
                        userName.removeClass('ui-state-error');
                        password.removeClass('ui-state-error');
                        valid = valid && checkLength(userName, 'username', 1, 20);
                        valid = valid && checkLength(password, 'password', 1, 20);
                        
                        if (valid) {
                            url = 'http://localhost:62865/api/friendships?' + 'userName=' + userName.val() + '&password=' + password.val() + '&userId=' + userId;

                            $.ajax({
                                type: 'POST',
                                url: url,
                                //crossDomain: true,
                                success: function (data) {
                                    updateTips('Success');
                                },
                                error: function (jqXHR, textStatus, errorThrown) {
                                    updateTips('Wrong username or password');
                                }
                            });
                        }
                    },
                    'Cancel': function () {
                        $(this).dialog('close');
                    }
                }
            });
            //=============================

            //====== Friend request ========
            $('#btFriendRequest').button().click(function () {
                $('#dlgFriendRequest').dialog('open');
                return false;
            });
            
            $("#dlgFriendRequest").dialog({
                autoOpen: false,
                height: 190,
                width: 370,
                modal: true,
                buttons: {
                    'Accept':function () {
                        url = 'http://localhost:62865/api/friendships?' + 'userId=' + userId + '&friendName=' + currentFriendRequest;
                        
                        $.post(url, function (result) {
                            //updateTips('Success');
                        });
                        
                        $(this).dialog('close');
                    },
                    'Deny':function () {
                        url = 'http://localhost:62865/api/friendrequests?' + 'userId=' + userId + '&friendName=' + currentFriendRequest + '&del=a';

                        $.post(url, function (result) {
                            //updateTips('Success');
                        });
                        
                        $(this).dialog('close');
                    },
                    'Cancel': function () {
                        $(this).dialog('close');
                    }
                }
            });
            //===========================
            
            //====== Room request ======
            $('#btRoomRequest').button().click(function () {
                $('#dlgRoomRequest').dialog('open');
                return false;
            });
            
            $("#dlgRoomRequest").dialog({
                autoOpen: false,
                height: 190,
                width: 370,
                modal: true,
                buttons: {
                    'Accept': function () {
                        url = 'http://localhost:62865/api/roommembers';

                        var roomMember = {
                            RoomId: currentRoomRequest.RoomId,
                            UserId: userId
                        };

                        $.post(url, roomMember, function() {
                            //alert('Success');
                        });
                        
                        $(this).dialog('close');
                    },
                    'Deny': function () {
                        url = 'http://localhost:62865/api/roomrequests?' + 'userId=' + userId + '&roomId=' + currentRoomRequest.RoomId;
                        
                        $.post(url, function (result) {
                            alert('Success');
                        });

                        $(this).dialog('close');
                    },
                    'Cancel': function () {
                        $(this).dialog('close');
                    }
                }
            });
            //==========================

            //======= Manage friend list =========
            $("#manageFriendList").click(function () {
                tips = $('#manage');
                userName = $('#tbName');
                $('#dlgAddFriend').dialog('open');
            });
            
            $('#dlgAddFriend').dialog({
                autoOpen: false,
                height: 300,
                width: 370,
                modal: true,
                buttons: {
                    'Add': function () {
                        var valid = true;
                        userName.removeClass('ui-state-error');
                        valid = valid && checkLength(userName, 'username', 1, 20);

                        if (valid) {
                            var friendName = $('#tbName').val();
                            if (isFriend(friendName) == true) {
                                updateTips('This person is already on your list');
                                return;
                            }
                            //var data = '{"userId":"' + userId + '","friendName":"' + friendName + '"}';
                            //url = 'http://localhost:62865/api/friendships?' + 'userId=' + userId + '&friendName=' + friendName;
                            url = 'http://localhost:62865/api/friendrequests';
                            var request = {
                                UserId: userId,
                                ToUserName: friendName
                            };

                            $.post(url, request, function (result) {
                                //updateTips('Success');
                            });
                        }
                    },
                    'Delete': function () {
                        var valid = true;
                        userName.removeClass('ui-state-error');
                        valid = valid && checkLength(userName, 'username', 1, 20);

                        if (valid) {
                            var friendName = $('#tbName').val();
                            if (isFriend(friendName) == false) {
                                updateTips('This person is not on your list');
                                return;
                            }
                            url = 'http://localhost:62865/api/friendships?' + 'userId=' + userId + '&friendName=' + friendName + '&del=a';

                            $.post(url, function (result) {
                                updateTips('Success');
                            });

                        }
                    },
                    'Cancel': function () {
                        $(this).dialog('close');
                    }
                },
                close: function () {
                    $('#tips').text("Fill in your friend's username");
                    $('#tbName').val('');
                }
            });
            //================================
            
            //======== Invite friend ========
            $("#inviteFriends").click(function () {
                if (currentRoomId != null) {
                    tips = $('#inviteFriendTips');
                    userName = $('#tbInviteFriend');
                    $("#dlgInviteFriend").dialog('open');
                } else {
                    myAlert = $('#alert');
                    myAlert.text('Choose a room to invite friends');
                    $('#dlgAlert').dialog('open');
                }
            });

            $('#dlgAlert').dialog({
                autoOpen: false,
                height: 190,
                width: 370,
                modal: true,
                buttons: {
                    'OK': function () {
                        $(this).dialog('close');
                    }
                }
            });

            $("#dlgInviteFriend").dialog({
                autoOpen: false,
                height: 260,
                width: 370,
                modal: true,
                buttons: {
                    'Invite':function () {                       
                        var valid = true;
                        userName.removeClass('ui-state-error');
                        valid = valid && checkLength(userName, 'username', 1, 20);

                        if (valid) {
                            var friendName = $('#tbInviteFriend').val();
                            var friend = getFriendByName(friendName);
                            if (friend == null) {
                                updateTips('This person is not on your list');
                                return;
                            }

                            if (friend.Status == false) {
                                updateTips('This person is offline');
                                return;
                            }
                            
                            url = 'http://localhost:62865/api/roomrequests?' + 'userId=' + userId + '&friendName=' + friendName + '&roomId=' + currentRoomId;

                            $.post(url, function (result) {
                                updateTips('Success');
                            });
                        }
                    },
                    'Cancel':function(){
                        $(this).dialog('close');
                    }
                },
            });
            //============================
            
            //======== Create chat room ==========
            $("#createRoom").click(function () {
                tips = $('#roomName');
                roomName = $('#tbRoomName');
                $('#dlgCreateRoom').dialog('open');
            });
            
            $("#dlgCreateRoom").dialog({
                autoOpen: false,
                height: 260,
                width: 370,
                modal: true,
                buttons: {
                    'Create': function () {
                        var valid = true;
                        roomName.removeClass('ui-state-error');
                        valid = valid && checkLength(roomName, 'room name', 1, 10);
                        
                        if(valid) {
                            var name = $("#tbRoomName").val();
                            var room = {
                                Name: name,
                                HostUserId: userId
                            };

                            url = 'http://localhost:62865/api/chatrooms';
                            $.post(url, room, function(value) {
                                updateTips('Created');
                                $('#dlgCreateRoom').dialog('close');
                            });                           
                        }
                    },
                    'Cancel': function () {
                        $(this).dialog('close');
                    }
                }
            });
            //=============================
            
            //==== Close chat room ====
            $("#closeRoom").click(function () {
                if (currentRoomId != null) {
                    url = 'http://localhost:62865/api/chatrooms/' + currentRoomId;
                    $.post(url, function (value) {
                        var li = $('li[aria-controls=room-' + currentRoomId + ']');
                        li.remove();
                        $('div[name="room-' + currentRoomId + '"]').remove();
                        $("#chatTabs").tabs("refresh");
                    });
                } else {
                    myAlert = $('#alert');
                    myAlert.text('Choose a room to close');
                    $('#dlgAlert').dialog('open');
                }
            });
            //===========================

            function updateTips(t) {
                tips
                    .text(t)
                    .addClass("ui-state-highlight");
                setTimeout(function () {
                    tips.removeClass("ui-state-highlight", 1500);
                }, 500);
            }

            function checkLength(o, n, min, max) {
                if (o.val().length > max || o.val().length < min) {
                    o.addClass("ui-state-error");
                    updateTips("Length of " + n + " must be between " +
                        min + " and " + max + ".");
                    return false;
                } else {
                    return true;
                }
            }
            //=================================
                        
            /* Send button*/
            $('#btSend').button().click(function () {
                var tbMessage = $('#tbMessage');
                
                if (tbMessage.val() == "") {
                    return false;
                }

                url = 'http://localhost:62865/api/messages';                
                var message = {
                    UserId: userId,
                    ToUserId: currentFriend,
                    RoomId: currentRoomId,
                    Text: tbMessage.val()
                };
                
              
                $.ajax({
                    type: 'POST',
                    url: url,
                    dataType: 'json',
                    data: message,
                    //crossDomain: true,
                    success: function (data) {
                        if(currentRoomId == null)
                            appendMessage(currentFriend, tbMessage.val(), $('#userName').val());
                        else {
                            appendMessage('room-' + currentRoomId, tbMessage.val(), $('#userName').val());
                        }
                        tbMessage.val('');
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
                              
                return false;
            });
            //===============================//
        });

        function isFriend(friendName) {
            for(var i = 0; i < friends.length; i++) {
                var friend = friends[i];
                if (friend.UserName == friendName)
                    return true;
            }

            return false;
        }
        
        function getFriendByName(friendName) {
            for (var i = 0; i < friends.length; i++) {
                var friend = friends[i];
                if (friend.UserName == friendName)
                    return friend;
            }

            return null;
        }
        
        function getFriend(id) {
            for (var i = 0; i < friends.length; i++) {
                var friend = friends[i];
                if (friend.Id == id)
                    return friend;
            }

            return null;
        }
        
        function getRoom(id) {
            for (var i = 0; i < rooms.length; i++) {
                var room = rooms[i];
                if (room.Id == id)
                    return room;
            }

            return null;
        }
        
        function addTab(id, friendName, avatar, selectIfExist, isRoom) {
            tabCount++;
            var isOpen = false;
            //var friendName = $("#" + id).text();
            $('.chatPanel').each(function () {
                if ($(this).attr('id') == id) {
                    isOpen = true;
                    return;
                }                   
            });
            if (isOpen) {
                if(selectIfExist)
                    selectTab(id, isRoom);
                return;
            }

            if (isRoom == false) {
                $('#tabs').append('<li><a href="#' + id + '" onclick="getCurrentFriend(' + "'" + id + "'" + ')">' + friendName
                    + '</a><span class="ui-icon ui-icon-close">Remove Tab</span></li>');
            }                
            else {
                $('#tabs').append('<li><a href="#' + id + '" onclick="getCurrentRoomId(' + "'" + id + "'" + ')">' + friendName
                    + '</a><span class="ui-icon ui-icon-close">Remove Tab</span></li>');
            }
            
            $('#chatTabs').append('<div id="' + id + '" class="chatPanel" name="' + id + '">' +
                                        '<div style="float: left; width: 550px; height: 200px; overflow: auto"></div>' +
                                        '<table style="float: right; height: 140px;">' +
                                            '<tr><td><img src="Avatars/' + avatar + '" width="80px" height="80px"/></td></tr>' +
                                        '</table>' +
                                  '</div>');
            
            $("#chatTabs").tabs('refresh');
            if (selectIfExist)
                selectTab(id, isRoom);
        }
        
        function appendMessage(id, message, name) {
            message = replaceTextWithEmo(message);
            var chatPanel = $('#chatTabs div[id="' + id + '"] div');
            chatPanel.append('<p><strong>' + name + ':</strong> ' + message + '</p>');
            chatPanel.scrollTop(chatPanel[0].scrollHeight);
        }
        
        function selectTab(id, isRoom) {
            var index = $('#tabs a[href="#' + id + '"]').parent().index();
            $('#chatTabs').tabs('select', index);
            if(isRoom == false)
                getCurrentFriend(id);
            else {
                getCurrentRoomId(id);
            }
        }

        function getCurrentFriend(id) {
            currentRoomId = null;
            currentFriend = id;
        }
        
        function getCurrentRoomId(id) {
            currentFriend = null;
            id = id.substring(5, id.length);
            currentRoomId = id;
        }
        
        function replaceTextWithEmo(text) {
            for(var i = 0; i < emoTexts.length; i++) {
                if(text.indexOf(emoTexts[i]) > -1) {
                    text = text.replace(emoTexts[i], emoticons[i]);
                }
            }

            return text;
        }
    </script>
    <style>
        .validateTips { border: 1px solid transparent; padding: 0.3em; }
        .ui-state-error { padding: .3em; }
    </style>
    <!---->
    <!-- Add Friend Dialog -->
    <div id="dlgAddFriend" title="Manage Friend">
	    <p id="manage" class="validateTips">Fill in your friend's username</p>
	    <form>
	    <fieldset>
		    <label for="tbName">User Name</label>
		    <input type="text" name="name" id="tbName" class="text ui-widget-content ui-corner-all" />
	    </fieldset>
	    </form>
    </div>
    <!---->
    <!-- Friend request Dialog -->
    <div id="dlgFriendRequest" title="Friend Request">
	    <p id="request"></p>
	    <form>
	    <fieldset>

	    </fieldset>
	    </form>
    </div>
    <!---->
    <!-- Room request Dialog -->
    <div id="dlgRoomRequest" title="Room Request">
	    <p id="roomRequest"></p>
	    <form>
	    <fieldset>

	    </fieldset>
	    </form>
    </div>
    <!---->
    <!-- Import Friend Dialog -->
    <div id="dlgImportFriend" title="Import Friends">
	    <p id="import" class="validateTips">Fill in your account to import from</p>
	    <form>
	    <fieldset>
		    <label for="tbName">User Name</label>
		    <input type="text" name="name" id="importUserName" class="text ui-widget-content ui-corner-all" />
            <label for="tbName">Password</label>
		    <input type="text" name="name" id="importPassword" class="text ui-widget-content ui-corner-all" />
	    </fieldset>
	    </form>
    </div>
    <!---->
    <!-- Create chat room dialog -->
    <div id="dlgCreateRoom" title="Create chat room">
	    <p id="roomName" class="validateTips">Fill in room name</p>
	    <form>
	    <fieldset>
		    <label for="tbName">Room name</label>
		    <input type="text" name="name" id="tbRoomName" class="text ui-widget-content ui-corner-all" />
	    </fieldset>
	    </form>
    </div>
    <!---->
    <!-- Invite friend dialog -->
    <div id="dlgInviteFriend" title="Invite friend to chat room">
	    <p id="inviteFriendTips" class="validateTips">Fill in your friend's username</p>
	    <form>
	    <fieldset>
		    <label for="tbName">User name</label>
		    <input type="text" name="name" id="tbInviteFriend" class="text ui-widget-content ui-corner-all" />
	    </fieldset>
	    </form>
    </div>
    <!---->
    <!-- Alert -->
    <div id="dlgAlert" title="Alert">
	    <p id="alert" class="validateTips"></p>
    </div>
    <!---->
    <section class="featured">
        <div class="content-wrapper" style="height: 40px">
            <!--<button id="btAddFriend">Manage friend list</button>-->
            <button id="btFriendRequest" style="display: none">Friend request</button>
            <button id="btRoomRequest" style="display: none">Room request</button>
            <!--<button id="btLoadFriend">Load Friend</button>-->
            <div id="animatedMenu">
                <ul>  
                    <li class="yellow" id="actions" style="width: 200px">  
                        <p>Actions</p>  
                        <p class="subtext" id="manageFriendList"><a>Manage friend list</a></p> 
                        <p class="subtext" id="importFriends"><a>Import friends</a></p> 
                    </li>
                    <li class="green" id="chatroom" style="width: 200px">  
                        <p>Chat room</p>  
                        <p class="subtext" id="createRoom"><a>Create room</a></p> 
                        <p class="subtext" id="inviteFriends"><a>Invite friends</a></p>
                        <p class="subtext" id="closeRoom"><a>Close room</a></p> 
                    </li>   
                </ul>
            </div>
        </div>
    </section>
</asp:Content>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
    <input id="userId" type="hidden" value='<%= Session["UserId"] %>' />
    <input id="userName" type="hidden" value='<%= Session["UserName"] %>' />
    <!-- jQuery -->
    <script>
        $(function () {
            $("#contacts").menu();
            $("#chatTabs").tabs();
            $("#chatTabs").css('height', '300px');
            
            // close icon: removing the tab on click
            $("#tabs span.ui-icon-close").live("click", function () {
                tabCount--;
                var panelId = $(this).closest("li").remove().attr("aria-controls");
                $('div[name="' + panelId + '"]').remove();
                $("#chatTabs").tabs("refresh");
            });
        });
    </script>
	<style>
	    .ui-menu { width: 150px; }
        #tabs { margin-top: 1em; }
        #tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
        #contacts li .ui-icon-bullet { float: right; margin: 0.2em 0.2em 0 0; cursor: pointer; }
	</style>
    <!---->
    <!-- Contact List -->

    <ul id="contacts">
	    <li style="height: 40px">
            <a id="abc" href="#" onclick="addTab(this.id)" style="float: left">	           
                    Loading ...<span class="ui-icon ui-icon-bullet"></span>
                
            </a> 
            <!--<img src="Images/defaultAvatar.png" width="30px" height="30px" style="float: right"/>-->               
	    </li>
    </ul>
    <!---->
    
    <!-- Chat Tabs -->
    <div id="chatTabs">
	    <ul id="tabs">
		    <!--<li><a id="def" href="#tabs-1">Nunc tincidunt</a><span class="ui-icon ui-icon-close">Remove Tab</span></li>
		    <li><a href="#tabs-2">Proin dolor</a></li>
		    <li><a href="#tabs-3">Aenean lacinia</a></li>-->
	    </ul>
	    <!--<div id="tabs-1" class="chatPanel">
	        <div style="float: left; width: 560px; height: 200px; overflow: auto">
		    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu.
                 Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etia
                m aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo.
		    </p>
            </div>
            <table style="float: right; height: 140px;">
	            <tr>
	                <td><img src="Avatars/defaultAvatar.png" width="80px" height="80px"/></td>
	            </tr>
	        </table>
        </div>
	    <div id="tabs-2" class="chatPanel">
		    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
	    </div>
	    <div id="tabs-3" class="chatPanel">
		    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
		    <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
	    </div>-->
    </div>
    <!---->
    <table style="position: absolute; top: 335px; right: 90px;">
        <tr>
            <td>
                <!--<textarea id="tbMessage" style="height: 80px; resize: none" ></textarea>-->
                <input type="text" id="tbMessage" style="width: 500px" autocomplete="off"/>
            </td>
            <td>
                <button id="btSend">Send</button>
            </td>
        </tr>
    </table>
</asp:Content>
